<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
        <Editor style="height: 300px;  overflow-y: hidden;" v-model="modelValue" @onCreated="handleCreated" />
    </div>


</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { uploadApi } from "@/api"
import { shallowRef } from 'vue'


const modelValue = defineModel("modelValue")

const editorRef = shallowRef()


const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    let editorConfig = editor.getConfig()

    editorConfig.MENU_CONF['uploadImage'] = {
        //自定义选择图片
        async customBrowseAndUpload(file: File, insertFn: any) {

            let fileReader = new FileReader()
            fileReader.readAsDataURL(file)
            fileReader.onload = (mm: any) => {//当子线程读取完毕之后会触发onload事件

                uploadApi.upload({ name: file.name, base64: mm.target.result }).then((res: any) => {
                    console.log(res);

                    //自己上传文件，并得到图片 url alt href
                    // 最后插入图片
                    insertFn(res, file.name, "")
                })
            }

        },
    },

    editorConfig.MENU_CONF['uploadVideo'] = {
        //自定义选择图片
        async customBrowseAndUpload(file: File, insertFn: any) {

            let fileReader = new FileReader()

            fileReader.readAsDataURL(file)
            fileReader.onload = (mm: any) => {

                uploadApi.upload({ name: file.name, base64: mm.target.result }).then((res: any) => {
                    insertFn(res, "")
                })
            }

        },
    }
}


</script>

<style scoped></style>
